<template>
	<view class="cu-modal bottom-modal" :class="isShow == true?'show':''">
		<view class="cu-dialog">
			<view class="cu-bar bg-white">
				<view class="action text-blue" @tap.stop="__hide">取消</view>
				<view class="action text-blue" @tap.stop="choseClearAll">已选择({{choseCount}}/{{count}})</view>
				<view class="action text-green" @tap.stop="__confirm">确定</view>
			</view>
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="refName" :adjust-position="false" type="text" :placeholder="plache" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-gradual-blue shadow-blur round" @tap="searchList">搜索</button>
				</view>
			</view>
			<scroll-view style="text-align:left;height: 70vh;" scroll-y="true" @scrolltolower="next">
				<checkbox-group @change="checkboxChange">
					<view v-for="val in list" class="cu-list menu" style="margin-top:0;border-top:1px solid #eee">
						<view class="cu-item" :class="menuArrow?'arrow':''">
							<label class="content" :for="'check' + val.id">
								<checkbox  v-if="checkbox" :id="'check' + val.id" style="transform:scale(0.7)" :class="val.checked" :checked="val.checked" :value="val.id"></checkbox>
								<text :class="icon"></text>
								<text class="text-grey">
									<text v-for="(value,index) in field">
										<text v-if="value.type === 'string'">{{value.field}}</text>
										<text v-else-if="value.type === 'field' && value.deep == null">{{val[value.field]}}</text>
										<text v-else-if="value.type === 'field' && value.deep == 2">{{val[value.field[0]][value.field[1]]}}</text>
										<text v-else-if="value.type === 'field' && value.deep == 3">{{val[value.field[0]][value.field[1]][value.field[2]]}}</text>
										<text v-else-if="value.type === 'field' && value.deep == 4">{{val[value.field[0]][value.field[1]][value.field[2]][value.field[3]]}}</text>
										<text v-else-if="value.type === 'field' && value.deep == 5">{{val[value.field[0]][value.field[1]][value.field[2]][value.field[3]][value.field[4]]}}</text>
										<text v-else-if="value.type === 'field' && value.deep == 6">{{val[value.field[0]][value.field[1]][value.field[2]][value.field[3]][value.field[4]][value.field[5]]}}</text>
										<text v-else>
											格式不正确
										</text>
									</text>
								</text>
								<button @tap.stop="radioChange(val.id)" v-if="checkbox == false" class="cu-btn round bg-green shadow" style="transform:scale(0.8);float: right;">
										 选择</button>
							</label>
						</view>
					</view>
				</checkbox-group>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	export default{
		data() {
			return {
				CustomBar: this.CustomBar,
				modalName: null,
				radio: 'radio1',
				list: [],
				chose: "",
				count: 0,
				pageNo: 1,
				refName: "",
				choseFlag: false,
				isShow: false
			};
		},
		mounted() {
		},
		props:{
			// listData的url
			url:{
				type: String,
				default:"",
			},
			// 需要显示的字段
			field:{
				type: Array,
				default:[]
			},
			// 图标
			icon:{
				type: String,
				default:''
			},
			// 搜索字段key
			search:{
				type: String,
				default: 'name'
			},
			// 提示出来的内容
			plache:{
				type: String,
				default: "请输入搜索内容"
			},
			// 唯一ID标识
			type:{
				type: String,
				default: ''
			},
			// 是否支持多选
			checkbox: {
				type: Boolean,
				default: false
			},
			// 每页大小
			pageSize: {
				type: String,
				default: '20'
			}
		},
		methods:{
			...mapActions(["JAjax"]),
			checkboxChange(val){
				this.chose = val.detail.value;
				console.log(this.chose)
			},
			radioChange(chose){
				let result = {};
				this.list.forEach((val,key)=>{
					if(chose.indexOf(val.id) != -1){
						result = val;
					}
				})
				this.$parent.listselectCallback(this.type, result);
				this.isShow = false;
			},
			getList(){
				uni.showLoading({
					title:"加载中",
					icon:"none"
				})
					this.JAjax({
						url: this.url + "?pageSize=" + this.pageSize + "&pageNo=" + this.pageNo + "&" + this.search + "=" + this.refName,
						success: data=>{
							uni.hideLoading();
							if(data.data.pageNo == this.pageNo){
								if (data.statusCode == 200 && data.data) {
									if(this.list.length == 0){
										this.list = data.data.list;
									} else {
										this.list = this.list.concat(data.data.list);
									}
									this.count = data.data.count;
								}	
								this.checked()
							} else {
								uni.showToast({
									title:"没有更多的数据了",
									icon:"none"
								})
							}
							
						}
					});
			},
			__show(chose){
				this.isShow = true;
				this.modalName = null;
				this.radio =  'radio1';
				this.list =  [];
				this.chose = "";
				this.count = 0;
				this.pageNo = 1;
				this.refName =  "";
				this.choseFlag =  false;
				this.chose = chose;
				this.getList();
			},
			__hide(){
				this.isShow = false;
			},
			// 确认选中
			__confirm(){
				let result = [];
				this.list.forEach((val,key)=>{
					if(this.chose.toString().indexOf(val.id) != -1){
						result.push(val)
					}
				})
				this.$parent.listselectCallback(this.type, result);
				this.isShow = false;
			},
			next(){
				this.pageNo++;
				this.getList();
			},
			searchList(){
				this.list = []
				this.pageNo = 1
				this.getList();
			},
			checked(){
				this.list.forEach((val,key)=>{
					if(this.chose.toString().indexOf(val.id) != -1){
						val.checked = true;
					}
				})
			},
			choseClearAll(){
				let that = this;
				uni.showModal({
					content: that.choseFlag == true ? '确定清空' : '确定全选',
					success: function (res) {
						if (res.confirm) {
							that.choseFlag = !that.choseFlag;
							that.chose = ""
							that.list.forEach((val,key)=>{
								val.checked = that.choseFlag;
								if(that.choseFlag){
									if(that.chose == ""){
										that.chose += val.id;
									} else {
										that.chose +=  "," + val.id;
									}
								}
							})
							if(that.choseFlag){
								uni.showToast({
									title: '已全选',
									icon:"none"
								});
							} else {
								uni.showToast({
									title: '已清空',
									icon:"none"
								});
							}
						} 
					}
				});
			}
		},
		computed:{
			choseCount(){
				return this.chose == "" ? 0 : this.chose.toString().split(",").length;
			}
		}
	}
</script>

<style>
</style>
